<template>
	<div id="page">
		<div class="box">
			<a-form :model="data.form" @finish="handleFinish" @submit.native.prevent :rules='data.rules'>
				<a-form-item name='username'>
					<label>用户名</label>
					<a-input v-model:value.trim="data.form.username" />
				</a-form-item>
				<a-form-item name='password'>
					<label>密码</label>
					<a-input v-model:value.trim="data.form.password" type="password" />
				</a-form-item>
				<a-form-item name='repassword'>
					<label>确认密码</label>
					<a-input v-model:value.trim="data.form.repassword" type="password" />
				</a-form-item>
				<a-form-item name='code'>
					<!-- 获取验证码 发送中 60秒 重新获取 -->
					<label>验证码</label>
					<a-row :gutter='10'>
						<a-col :span="14">
							<a-input v-model:value.trim="data.form.code" :maxlength='6'/>
						</a-col>
						<a-col :span="10">
							<a-button type="primary" @click='getCode' :loading='btn_loading'
							block>{{btn_text}}</a-button>
						</a-col>
					</a-row>
				</a-form-item>
				<!-- 滑动验证 -->
				<a-form-item>
					<Captcha />
				</a-form-item>
				<a-form-item>
					<a-button type="primary" html-type="submit" block>
						重置密码
					</a-button>
				</a-form-item>
			</a-form>
			<div class="text-center fs-12">
				<router-link to="/" class="color-white">登 录</router-link> | 
				<router-link to="/register" class="color-white">注 册</router-link>
			</div>
		</div>
	</div>
</template>

<script>
	import {
		reactive,
		onMounted,
		toRefs
	} from 'vue'
	import Captcha from 'components/Captcha'
	import {
		stripscript,
		validateEmail,
		validatePass,
		validateCode
	} from '@/utils/validate.js'
	export default {
		name: 'Forget',
		components: {
			Captcha
		},
		setup(props, {
			root
		}) {
			// 自定义校验规则 
			let checkUsername = async (rule, value) => {
				if (value === '') {
					return Promise.reject('邮箱不能为空！！');
				} else {
					return validateEmail(value)?Promise.resolve():Promise.reject('请输入正确格式的邮箱');
				}
			};
			let checkCode = async (rule, value) => {
				if (value === '') {
					return Promise.reject('请输入验证码！！');
				} else {
					return validateCode(value) ?  Promise.resolve():Promise.reject('请输入正确格式的验证码');
				}
			};
			let checkPass = async (rule, value) => {
				if (value === '') {
					return Promise.reject('请输入密码！！');
				} else {
					return validatePass(value) ? Promise.resolve() : Promise.reject('请输入字母+6位数字密码');
				}
			};
			let checkRePass = async (rule, value, callback) => {
				if (value === '') {
					return Promise.reject('请确认密码！！');
				} else if (value !== data.form.password) {
					return Promise.reject("两次输入的密码不一样");
				} else {
					return Promise.resolve();
				}
			};


			// data
			const data = reactive({
				// 表单
				form: {
					username: '5201314@qq.com',
					password: '5201314@qq.com',
					code: '123456',
					repassword: '5201314@qq.com'
				},
				// 验证表单规则
				rules: {
					password: [{
						validator: checkPass,
						trigger:  'blur'
					}],
					repassword: [{
						validator: checkRePass,
						trigger:  'blur'
					}],
					username: [{
						validator: checkUsername,
						trigger:  'blur'
					}],
					code: [{
						validator: checkCode,
						trigger:  'blur'
					}]
				},
			})
			const codeItem = reactive({
				btn_text:'获取验证码',
				btn_loading:false,
				btn_disabled:false,
				sec:10,
				timer:null
			})
			
			// 方法
			const getCode = ()=>{
				// 其它条件满足的情况
				
				if(codeItem.btn_disabled)return
				
				// 发送中 --根据请求调整
				codeItem.btn_loading = true 
				codeItem.btn_disabled = true 
				codeItem.btn_text ='发送中'
				
				// 倒计时
				codeItem.timer&&clearInterval(codeItem.timer)
				
				codeItem.timer = setInterval(()=>{
					codeItem.btn_text =codeItem.sec +'秒'
					codeItem.sec -= 1
					 if(codeItem.sec<=0){
						 clearInterval(codeItem.timer)
						 codeItem.timer = null
						 codeItem.btn_loading = false
						  codeItem.btn_disabled = false 
						  codeItem.sec=10
						 codeItem.btn_text ='重新获取'
					 }
					
				},1000)
				
				// 重新获取
				
			}
			const handleFinish = (val) => {
				console.log(val)
			}

			return {
				data,
				...toRefs(codeItem),
				// 方法
				handleFinish,
				getCode
			}
		}
	}
</script>

<style lang="scss">
	@import './index.scss';
</style>
